<!doctype html>
<html lang="en">
<head>
    <title>Grid - Filtering</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css"/>
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.plugin.wijtextselection.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijinputcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijinputdate.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijinputmask.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijinputnumber.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                showFilter: true,
                data: [
                    [11, 14, 12, 0],
                    [42, 9, 8, 10, 0],
                    [72, 34, 8, 5, 0],
                    [14, 18.6, 9, 0],
                    [51, 42.4, 40, 0],
                    [41, 7.7, 10, 0],
                    [51, 42.4, 35, 0.15],
                    [65, 16.8, 15, 0.15],
                    [22, 16.8, 6, 0.05],
                    [57, 15.6, 15, 0.05],
                    [65, 16.8, 20, 0],
                    [20, 64.8, 40, 0.05],
                    [33, 2, 25, 0.05],
                    [60, 27.2, 40, 0],
                    [31, 10, 20, 0],
                    [39, 14.4, 42, 0],
                    [49, 16, 40, 0],
                    [24, 3.6, 15, 0.15],
                    [55, 19.2, 21, 0.15],
                    [74, 8, 21, 0],
                    [2, 15.2, 20, 0],
                    [16, 13.9, 35, 0],
                    [36, 15.2, 25, 0],
                    [59, 44, 30, 0],
                    [53, 26.2, 15, 0],
                    [77, 10.4, 12, 0],
                    [27, 35.1, 25, 0],
                    [39, 14.4, 6, 0],
                    [77, 10.4, 15, 0],
                    [2, 15.2, 50, 0.2],
                    [5, 17, 65, 0.2],
                    [32, 25.6, 6, 0.2],
                    [21, 8, 10, 0],
                    [37, 20.8, 1, 0],
                    [41, 7.7, 16, 0.25],
                    [57, 15.6, 50, 0],
                    [62, 39.4, 15, 0.25],
                    [70, 12, 21, 0.25],
                    [21, 8, 20, 0],
                    [35, 14.4, 20, 0],
                    [5, 17, 12, 0.2],
                    [7, 24, 15, 0],
                    [56, 30.4, 2, 0],
                    [16, 13.9, 60, 0.25],
                    [24, 3.6, 28, 0],
                    [30, 20.7, 60, 0.25],
                    [74, 8, 36, 0.25],
                    [2, 15.2, 35, 0],
                    [41, 7.7, 25, 0.15],
                    [17, 31.2, 30, 0],
                    [70, 12, 20, 0],
                    [12, 30.4, 12, 0.05],
                    [40, 14.7, 50, 0],
                    [59, 44, 70, 0.15],
                    [76, 14.4, 15, 0.15],
                    [29, 99, 10, 0],
                    [72, 27.8, 4, 0],
                    [33, 2, 60, 0.05],
                    [72, 27.8, 20, 0.05],
                    [36, 15.2, 30, 0]
                ],
                columns: [
                    { headerText: "ProductID" },
                    { headerText: "UnitPrice", dataType: "currency" },
                    { headerText: "Quantity", dataType: "number", dataFormatString: "n0", filterValue: 30, filterOperator: "GreaterOrEqual" },
                    { headerText: "Discount", dataType: "number", dataFormatString: "p0", filterValue: 0, filterOperator: "NotEqual" }
                ]
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Filtering</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table id="demo">
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
            <!-- Begin options markup -->
                
            <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                This sample shows how you can filter data by enabling the <b>showFilter</b> option.
            </p>
        </div>
    </div>
</body>
</html>
